<script setup lang="ts">
  import useSetting from '../../store/modules/setting';
  import { userOtherLogin } from '@/services/api/user';
  import QrLogin from '@/views/Login/QrLogin.vue';
  import Tips from '@/views/Login/Tips.vue';
  import Login from '@/views/Login/Login.vue';
  import Register from '@/views/Login/Register.vue';
  let setting = useSetting();
  const activeName = ref<string>('passwordLogin');
  const handleClick = () => {};
  const gotoLogin = (type: string) => {
    userOtherLogin(type).then(({ data }) => {
      window.location.href = data.loginUrl;
    });
  };
</script>

<template>
  <div class="login-register">
    <div class="login-qr__wrapper">
      <span>扫描二维码登录</span>
      <QrLogin />
    </div>
    <div class="login-register-container">
      <el-tabs stretch v-model="activeName" class="login-tabs" @tab-click="handleClick">
        <el-tab-pane label="密码登录" name="passwordLogin" lazy>
          <Login v-model:activeName="activeName" />
        </el-tab-pane>
        <el-tab-pane label="短信登录" name="smsLogin" lazy>
          <Register />
        </el-tab-pane>
      </el-tabs>
      <div class="other-login" v-if="setting.logins && setting.logins.length > 0">其他登录方式</div>
      <div class="other-login-container">
        <div
          class="other-login-item"
          v-for="item in setting.logins"
          :key="item.appId"
          @click="gotoLogin(item.type)"
        >
          <img :src="item.logo" class="other-login-item_img" alt="" />
          <span class="other-login-item_title"> {{ item.typeName }}</span>
        </div>
      </div>
    </div>
  </div>
  <Tips />
</template>

<style scoped>
  .login-register {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
  }

  .login-register-container {
    display: block;
    flex: 2;
    height: 340px;
    padding: 30px 40px 10px 40px;
  }

  .login-tabs {
    width: 80%;
    margin: 0 auto;
  }

  .other-login {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: smaller;
    padding-top: 10px;
  }

  .other-login-container {
    display: flex;
    padding: 10px 40px 5px 40px;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  .other-login-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-bottom: 5px;
  }

  .other-login-item_img {
    height: 20px;
    width: 20px;
  }

  .other-login-item_title {
    padding: 0 5px;
  }

  .login-qr__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0 50px 50px;

    span {
      padding: 20px 0;
      font-weight: 600;
    }
  }
</style>
